<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热血格斗技能组合查询工具</title>
    <link rel="stylesheet" href="./libs/bootstrap.min.css">
    <link rel="stylesheet" href="./libs/element-ui/index.css">
    <style>
        html,body{
            padding: 0;
            margin: 0;
        }
        [v-cloak]{
            display: none;
        }
        #app{
            padding: 20px;
        }
        .title{
            font-size: 16px;
            font-weight: bold;
        }
        .center{
            text-align: center;
        }
        .query-wrap{
            padding-top: 10px;
        }
        .query-wrap .query-box{
            border: 1px solid #dcdfe6;
            border-radius: 3px;
            position: relative;
            padding: 20px;
        }
        .query-wrap .query-box .query-title{
            position: absolute;
            top: -10px;
            left: 50px;
            background-color: #fff;
            z-index: 10;
            padding: 0 20px;
            font-size: 14px;
        }
        .tag-list-box{
            display: flex;
            flex-wrap: wrap;
        }
        .tag-list-box .tag-item{
            margin-right: 10px;
            margin-bottom: 10px;
            user-select: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <p class="title">《热血格斗》是一款经典的ACT游戏，该游戏共有10个技能，20个技能组合。技能组合与角色生日息息相关，20个技能以月为单位，按日期依次轮排，每月月初则重置排序（1月1日对应第一个组合，2月1日对应第二个组合，依次类推），下面是技能组合总表，以及根据所需技能查询符合条件的生日</p>
        <div class="query-wrap">
            <div class="query-box">
                <div class="query-title">选择技能</div>
                <div class="tag-list-box">
                    <div class="tag-item" v-for="(skill,i) in skillList" :key="i">
                        <!--  -->
                        <el-tag :type="selectedSkillList.includes(skill)? 'primary':'info'" @click="handleClickTag(skill)">{{ skill }}</el-tag>
                    </div>
                </div>
            </div>
        </div>
        <!-- 表格 -->
        <table class="table table-bordered table-striped table-responsive" style="margin-top: 10px;">
            <tr>
                <th class="center">序号</th>
                <th>组合技能</th>
                <!-- 共有12个月，每个月2列(12月3列)，需要跨列 -->
                <th v-for="n in 12" :key="n" :colspan="n==12? 3:2" class="center">{{n}}月</th>
            </tr>
            <!-- 技能组合列表 -->
            <tr v-for="(item, row_index) in filterSkillCombinationList" :key="row_index">
                <td class="center">{{ row_index + 1 }}</td>
                <td>{{ item.join(',') }}</td>
                <!-- 根据行数和列数输出生日 -->
                <td v-for="col_index in 25" :key="col_index" class="center">{{showBirthday(row_index+1, col_index)}}</td>
            </tr>
            <!-- 空数据 -->
            <tr v-if="filterSkillCombinationList.length == 0">
                <td colspan="27" class="center">没有这个组合</td>
            </tr>
        </table>
    </div>
</body>
</html>
<!-- 引入Vue.js和Element-ui -->
<script src="./libs/vue.js"></script>
<script src="./libs/element-ui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                skillList: [
                    '磐石防御',
                    '翻滚',
                    '飞膝',
                    '跳跃肘击',
                    '跳跃断头台',
                    '马赫踩',
                    '高跳旋转落踢',
                    '蜻蜓点水',
                    '马赫拳',
                    '马赫脚'
                ],//技能列表
                skillCombinationList: [
                    ['磐石防御','翻滚','飞膝'],
                    ['跳跃肘击','磐石防御','翻滚'],
                    ['跳跃断头台','跳跃肘击','磐石防御'],
                    ['马赫踩','跳跃断头台','跳跃肘击'],
                    ['翻滚','飞膝','高跳旋转落踢'],
                    ['马赫踩','蜻蜓点水','高跳旋转落踢'],
                    ['马赫拳','蜻蜓点水','高跳旋转落踢'],
                    ['翻滚','马赫拳'],
                    ['翻滚','马赫拳','蜻蜓点水'],
                    ['跳跃肘击','飞膝'],
                    ['蜻蜓点水','高跳旋转落踢'],
                    ['马赫踩','马赫脚','蜻蜓点水'],
                    ['跳跃断头台','高跳旋转落踢'],
                    ['跳跃肘击','马赫脚'],
                    ['飞膝','蜻蜓点水','高跳旋转落踢'],
                    ['高跳旋转落踢'],
                    ['翻滚','飞膝','马赫脚'],
                    ['蜻蜓点水'],
                    ['飞膝','马赫脚'],
                    ['翻滚','马赫脚']
                ],//技能组合列表


                selectedSkillList: [],//已经选中的技能
            }
        },
        methods: {
            //根据行数和列数输出生日
            showBirthday(row_index, col_index){
                //每月天数
                const days = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
                //计算月份 (1-24)=> (1-12) 25列特殊
                if(col_index == 25){
                    var month = 12
                }else{
                    var month = Math.ceil(col_index/2)
                }
                //根据月份计算起始日期(1月从第一个开始，2月从第二天开始)
                const emptyStartLength = month - 1
                //计算哪一个月的第几列
                var col_in_month = col_index - (month-1)*2
                //当前日期(第二列+20，第三列+40)
                var date = row_index - emptyStartLength + (col_in_month-1)*20
                //返回展示结果
                if(date < 1 || date > days[month-1]){
                    //行数对应日期，超过天数则返回空
                    return ""
                }else{
                    //返回月日
                    return `${month}-${date}`
                }
            },
            //点击技能
            handleClickTag(skill){
                //判断是选中还是反选，选中不能超过3个
                if(this.selectedSkillList.includes(skill)){
                    //反选
                    var index = this.selectedSkillList.indexOf(skill)
                    this.selectedSkillList.splice(index, 1)
                }else if(this.selectedSkillList.length >= 3){
                    this.$message.error('技能不能超过3个！')
                }else{
                    this.selectedSkillList.push(skill)
                }

            },
        },
        computed: {
            //过滤后的技能组合
            filterSkillCombinationList(){
                return this.skillCombinationList.filter(skillList=>{
                    //判断选中的技能组合是否是当前list的子集
                    return this.selectedSkillList.every(skill=>{
                        return skillList.includes(skill)
                    })
                })
            }
        }
    })
</script>